    </div>
    <script>
      var input = document.createElement("input");
      input.id = "search";
      input.type = "text";
      input.placeholder = "Search here...";
      document.querySelector("h1").after(input);
      var items = [].slice.call(document.querySelectorAll("#list tbody tr"));
      function filterItems(item, filter) {
        return !item.querySelector("td").textContent.trim().toLowerCase().includes(filter);
      }
      input.addEventListener("keyup", function () {
        items.forEach((item) => {
          item.hidden = false;
        });
        items
          .filter((item) => filterItems(item, this.value.trim().toLowerCase()))
          .forEach((item) => {
            item.hidden = true;
          });
      });

      var tableDiv = document.createElement("div");
      tableDiv.id = "tableDiv";
      tableDiv.appendChild(document.querySelector("table"));
      document.getElementById("search").after(tableDiv);

      var headers = document.querySelectorAll("th");
      headers.forEach((header) => {
        var links = header.querySelectorAll("a");
        var ascendingLink = document.createElement("a");
        ascendingLink.innerHTML = "&nbsp;↑&nbsp;";
        ascendingLink.href = links[0].href;
        links[0].removeAttribute("href");
        links[1].after(ascendingLink);
      });
    </script>
  </body>
</html>
